<template>
	<view class='productSort copy-data'>
		<view class='header'>
			<!-- <view class='search-box'>
				<text class='iconfont icon-sousuo'></text>
				<input class="set" type='text' placeholder='输入关键词搜索' @confirm="searchSubmitValue"
					confirm-type='search' name="search" placeholder-class='placeholder'></input>
			</view> -->
			<navigator url="/pages/goods/goods_search/index" class="search-box">
				<text class='iconfont icon-sousuo'></text>
				<input class="set" type="text" value="" placeholder="输入关键词搜索" />
			</navigator>
		</view>
		<view class="scroll-box">
			<view class='aside'>
				<scroll-view scroll-y="true" scroll-with-animation='true' class="height-add">
					<view 
						class='item acea-row row-center-wrapper' 
						:class='index==navActive?"on":""'
						v-for="(item,index) in categoryList" 
						:key="index" 
						@click='tap(index,"b"+index)'
					>
						<text>{{item.cate_name}}</text>
					</view>
					<!-- #ifdef APP-PLUS -->
					<view class="item" v-if="isFooter"></view>
					<!-- #endif -->
				</scroll-view>
			</view>


			<view class='conter'>
				<scroll-view scroll-y="true" :scroll-into-view="toView" @scroll="scroll" scroll-with-animation='true'
					class="conterScroll height-add">
					<view class="cate-ad" @click="goSpu(25)">
						<image class="cate-ad" src="https://jipinzulin.oss-cn-beijing.aliyuncs.com/attach/2023/06/037ab202306261059433375.png"></image>
					</view>
					<view class="" >
						<block v-for="(item,index) in productList" :key="index">
							<view class='listw' :id="'b'+index">
								<view class="cate-head">
									<view class='name'>{{ item.cate_name }}</view>
									<view class="read-more" v-if="listType == 2">
										<navigator 
											hover-class='none'
											:url='"/pages/goods/goods_list/index?sid="+item.id+"&title="+item.cate_name + "&searchValue="+item.cate_name'
											class='item acea-row row-middle flex'>
											<view class="txt">查看全部</view>
											<view class="iconfont icon-xiangyou"></view>
										</navigator>
									</view>
								</view>
								<!-- 二级分类样式 -->
								<view class='list acea-row' v-if="listType == 2">
									<block v-for="(productItem,productIndex) in item.product_list" :key="productIndex">
										<!-- <navigator hover-class='none'
											:url='"/pages/goods/goods_list/index?sid="+item.id+"&title="+item.cate_name'
											class='item acea-row row-column row-middle'> -->
										<view 
											class="item acea-row row-column row-middle" 
											@click="toDetail(productItem)">
											<view class='picture'>
												<u-image
													width="100%" 
													height="160" 
													:src="productItem.image"
												></u-image>
											</view>
											<view class='name line1 o-ellipsis'>{{productItem.store_name}}</view>
										</view>
											
										<!-- </navigator> -->
									</block>
									<u-empty
										v-if="!item.product_list.length" 
										text="暂无数据" 
										mode="list"
										textSize="25"
										iconSize="110"
									></u-empty>
								</view>
								<!-- 一级分类样式 -->
								<view class="prodict-li" v-if="listType == 1">
									<view 
										class="li-item flex" 
										v-for="(productItem, productIndex) in item.product_list"
										:key="productIndex"
										@click="toDetail(productItem)"
									>
										<u-image 
											width="184rpx" 
											height="184rpx" 
											:src="productItem.image"
										></u-image>
										<view class="li-info">
											<view class="info-tit m-ellipsis">
												<span class="tit-tag" v-if="productItem.dis_old == 100">
													全新
												</span>
												{{ productItem.store_name }}
											</view>
										<!-- 	<view class="info-serve-box flex">
												<view class="">
													顺丰包邮
												</view>
												<u-line 
													color="#EBEBEB" 
													length="16" 
													direction="col"
													margin="0 8rpx"
												/>
												<view class="">
													租完归还
												</view>
											</view> -->
											<view class="info-lable-box flex">
												<view 
													class="lable-li li-cor0" 
													v-if="productItem.StoreProductLabel.length >= 1"
												>
													{{ productItem.StoreProductLabel[0] }}
												</view>
												<view
													class="lable-li li-cor1" 
													v-if="productItem.StoreProductLabel.length >= 2"
												>
													{{ productItem.StoreProductLabel[1] }}
												</view>
											</view>
											<view class="info-price flex">
												<view class="price-num flex">
													<view class="price-icon">
														¥
													</view>
													{{ productItem.min_day_price }}
												</view>
												<view class="price-unit">
													/天
												</view>
											</view>
										</view>
									</view>
									<u-empty 
										v-if="!item.product_list.length" 
										text="暂无数据"
										color="#fff"
										mode="list"
										textSize="25rpx"
										iconSize="110"
									></u-empty>
								</view>
								
							</view>
						</block>
					</view>
					<view :style='"height:"+(height-heightDiv)+"rpx;"'></view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	let sysHeight = uni.getSystemInfoSync().statusBarHeight + 'px';
	import {
		getCategoryList,
		// getProductslist,
		getCategoryProductList
	} from '@/api/store.js';
	import {
		getCategoryVersion
	} from '@/api/api.js';
	import {
		mapState,
		mapGetters
	} from "vuex"
	const app = getApp();
	export default {
		props: {
			isFooter: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				navlist: [],
				productList: [], // 产品列表
				listType: "", // 产品列表类型
				categoryList: [],
				navActive: 7,
				number: "",
				height: 0,
				heightDiv: 0,
				hightArr: [],
				toView: "",
				tabbarH: 0,
				footH: 0,
				windowHeight: 0,
				pageHeight: '100%',
				sysHeight: sysHeight,
				// #ifdef APP-PLUS
				pageHeight: app.globalData.windowHeight,
				// #endif
				footerStatus: false,
				lock: false
			}
		},
		computed: {
			...mapState({
				cartNum: state => state.indexData.cartNum
			})
		},
		mounted() {
			let that = this
			this.getAllCategory2();

			// #ifdef H5
			uni.getSystemInfo({
				success: function(res) {
					that.pageHeight = res.windowHeight + 'px'
				}
			});
			// #endif
		},
		methods: {
			/* 跳转商品详情 */
			toDetail(item) {
				uni.navigateTo({
					url: `/pages/goods_details/index?id=${item.id}`
				})
			},
			goSpu(id) {
				uni.navigateTo({
					url: `/pages/goods_details/index?id=${id}`
				})
			},
			/* 获取分类下的产品列表 */
			getProductListFun() {
				getCategoryProductList({
					cate_id: this.categoryList[this.navActive].id
				}).then(res => {
					this.listType = res.data.type;
					if(res.data.type == 1) {
						this.productList = [res.data.info]
					}else {
						this.productList = res.data.info
					}
				})
			},
			footHeight(data) {
				this.footH = data
			},
			infoScroll: function() {
				let that = this;
				let len = that.productList.length;
				this.number = that.productList[len - 1].children.length;
				let height = 0;
				let hightArr = [];
				//设置商品列表高度
				let query = uni.createSelectorQuery().in(this);
				query.select(".conter").boundingClientRect();
				query.exec(function(res) {
					height = res[0].height;
				})
				for (let i = 0; i < len; i++) {
					//获取元素所在位置
					let query = uni.createSelectorQuery().in(this);
					let idView = "#b" + i;
					query.select(idView).boundingClientRect();
					query.exec(function(res) {
						let top = res[0].top;
						that.hightArr.push(top);
						if (len == that.hightArr.length) {
							//设置转化比例
							uni.getSystemInfo({
								success: function(res) {
									let per = (750 / res.windowWidth);
									that.height = height * per;
									that.heightDiv = (that.hightArr[that.hightArr.length - 1] -
										that.hightArr[that.hightArr.length - 2]) * per;
								},
							});
						}
					});
				};
			},
			tap: function(index, id) {
				this.toView = id;
				this.navActive = index;
				this.$set(this, 'lock', true);
				/* 获取分类下的产品列表 */
				this.getProductListFun();
			},
			setCategory(data) {
				let that = this;
				this.productList = data;
				this.$nextTick(res => {
					setTimeout(function() {
						that.infoScroll();
					})
				})
			},
			/* 获取分类列表 */
			getCategory() {
				getCategoryList().then(res => {
					uni.setStorageSync('category', JSON.stringify(res.data));
					this.setCategory(res.data);
				})
			},
			getAllCategory: function() {
				let that = this;
				let category = uni.getStorageSync('category');
				if (category) {
					getCategoryVersion().then(res => {
						let categoryVersion = uni.getStorageSync('categoryVersion');
						if (res.data.version === categoryVersion) {
							this.setCategory(JSON.parse(category));
						} else {
							uni.setStorageSync('categoryVersion', res.data.version);
							this.getCategory();
						}
					});
				} else {
					this.getCategory();
				}
			},
			getAllCategory2: function() {
				let that = this;
				getCategoryList().then(res => {
					let data = res.data;
					console.log(res.data, "---208");
					that.categoryTitle = data[0].cate_name;
					that.cid = data[0].id;
					that.sid = 0;
					that.navActive = 0;
					that.tabClick = 0;
					that.categoryList = data;
					that.categoryErList = res.data[0].children ? res.data[0].children : [];
					that.page = 1;
					that.loadend = false;
					that.tempArr = [];
					// that.productslist();
					this.getProductListFun();
				})
			},

			// 产品列表
			// productslist: function() {
			// 	let that = this;
			// 	if (that.loadend) return;
			// 	if (that.loading) return;
			// 	that.loading = true;
			// 	that.loadTitle = '';
			// 	getProductslist({
			// 		page: that.page,
			// 		limit: that.limit,
			// 		type: 1,
			// 		cid: that.cid,
			// 		sid: that.sid
			// 	}).then(res => {
			// 		console.log(res, "---res 产品列表");
			// 		let list = res.data,
			// 			loadend = list.length < that.limit;
			// 		that.tempArr = that.$util.SplitArray(list, that.tempArr);
			// 		that.$set(that, 'tempArr', that.tempArr);
			// 		that.loading = false;
			// 		that.loadend = loadend;
			// 		that.loadTitle = loadend ? "没有更多内容啦~" : "加载更多";
			// 		that.page = that.page + 1;
			// 	}).catch(err => {
			// 		that.loading = false;
			// 		that.loadTitle = '加载更多'
			// 	});
			// },
			scroll: function(e) {
				let scrollTop = e.detail.scrollTop;
				let scrollArr = this.hightArr;
				if (this.lock) {
					this.$set(this, 'lock', false);
					return;
				}
				for (let i = 0; i < scrollArr.length; i++) {
					if (scrollTop >= 0 && scrollTop < scrollArr[1] - scrollArr[0]) {
						this.navActive = 0
					} else if (scrollTop >= scrollArr[i] - scrollArr[0] && scrollTop < scrollArr[i + 1] - scrollArr[
							0]) {
						this.navActive = i
					} else if (scrollTop >= scrollArr[scrollArr.length - 1] - scrollArr[0]) {
						this.navActive = scrollArr.length - 1
					}
				}
			},
			searchSubmitValue: function(e) {
				console.log(e, "---点击搜索");
				if (this.$util.trim(e.detail.value).length > 0)
					uni.navigateTo({
						url: '/pages/goods/goods_list/index?searchValue=' + e.detail.value
					})
				else
					return this.$util.Tips({
						title: '请填写要搜索的产品信息'
					});
			},
		}
	}
</script>
<style >
	.height-add {
		height: 100%;
	}

	page {
		height: 100%;
		background-color: #fff;
	}

	.cate-ad {
		width: 512rpx;
		height: 128rpx;
	}
	.cate-ad image {
		width: 100%;
		height: 100%;
	}
</style>
<style scoped lang="scss">
	/deep/uni-scroll-view {
		padding-bottom: 0 !important;
	}

	.sys-title {
		z-index: 10;
		position: relative;
		height: 40px;
		line-height: 40px;
		font-size: 34rpx;
		color: #333;
		background-color: #fff;
		text-align: center;
	}

	.sys-head {
		background-color: #fff;
	}

	.productSort {
		display: flex;
		flex-direction: column;
		//#ifdef MP
		height: calc(100vh - var(--window-top)) !important;
		//#endif
		//#ifndef MP
		height: 100vh //#endif
	}

	.productSort .header {
		padding: 24rpx 12rpx;
		border-bottom: 2rpx solid #FAFAFA;
		margin-bottom: 12rpx;
	}

	.productSort .header .search-box {
		display: flex;
		align-items: center;
		// width: 320rpx;
		padding: 12rpx 26rpx;
		height: 64rpx;
		background-color: #F5F7FA;
		border-radius: 32rpx;
	}

	.productSort .header .set {
		flex: 1;
		background-color: #F5F7FA;
		border-radius: 50rpx;
		box-sizing: border-box;
		padding: 0 8rpx;
		font-size: 28rpx;
	}

	.productSort .header .input .iconfont {
		margin-right: 4rpx;
		font-size: 35rpx;
		color: #555;
	}

	.productSort .header .input .placeholder {
		color: #999;
	}

	.productSort .header .input input {
		font-size: 26rpx;
		height: 100%;
		flex: 1;
	}

	.productSort .scroll-box {
		flex: 1;
		overflow: hidden;
		display: flex;
		border-top: 2rpx solid #FAFAFA;
	}

	// #ifndef MP
	uni-scroll-view {
		padding-bottom: 100rpx;
	}

	// #endif

	.productSort .aside {
		width: 180rpx;
		height: 100%;
		overflow: hidden;
		background-color: #F5F7FA;
	}

	.productSort .aside .item {
		height: 92rpx;
		width: 100%;
		font-size: 26rpx;
		color: #424242;
		text-align: center;
	}

	.productSort .aside .item.on {
		background-color: #fff;
		width: 100%;
		color: #39CCC2;
		font-weight: bold;
		position: relative;

		&:before {
			content: " ";
			position: absolute;
			top: 34rpx;
			left: 0;
			z-index: 2;
			width: 4rpx;
			height: 24rpx;
			background: #39CCC2;
			border-radius: 0rpx 3rpx 3rpx 0rpx;
		}
	}

	.productSort .conter {
		flex: 1;
		height: 100%;
		overflow: hidden;
		padding: 0 24rpx;
		background-color: #fff;
		position: relative;
	}

	.productSort .conter .listw {
		margin-top: 48rpx;
		.prodict-li {
			.li-item {
				.li-info {
					padding-left: 10rpx;
					.info-tit {
						.tit-tag {
							padding: 0rpx 7rpx;
							background: linear-gradient(180deg, #FF9D5C 0%, #FF7847 100%);
							border-radius: 20rpx;
							font-size: 24rpx;
							font-family: PingFangSC-Medium, PingFang SC;
							font-weight: 500;
							color: #FFFFFF;
							margin-right: 10rpx;
						}
						font-size: 28rpx;
						font-family: PingFangSC-Medium, PingFang SC;
						font-weight: bold;
						color: #1F1F1F;
						line-height: 44rpx;
					}
					.info-serve-box {
						font-size: 24rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #999999;
						line-height: 24rpx;
						margin: 20rpx 0 ;
						align-items: center;
					}
					.info-lable-box {
						margin-top: 8rpx;
						.lable-li {
							padding: 5rpx 10rpx;
							border-radius: 4rpx;
							margin-right: 10rpx;
							font-size: 24rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							line-height: 24rpx;
						}
						.li-cor0 {
							background: rgba(255,145,71,0.08);
							color: #FF9147;
						}
						.li-cor1 {
							background: rgba(255,96,71,0.08);
							color: #FF3D1F;
						}
						flex-wrap: wrap;
					}
					.info-price {
						.price-num {
							font-size: 40rpx;
							font-family: D-DIN-Bold, D-DIN;
							font-weight: bold;
							line-height: 30rpx;
							margin-right: 8rpx;
							.price-icon {
								font-size: 28rpx;
								position: relative;
								top: 5rpx;
							}
						}
						.price-unit {
							font-size: 24rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							line-height: 24rpx;
						}
						color: #FF1F2E;
						margin-top: 30rpx;
						margin-bottom: 10rpx;
						align-items: flex-end;
					}
				}
				margin: 20rpx 0;
			}
		}
		.cate-head {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin: 20rpx 0;
			.name {
				font-size: 32rpx;
				font-weight: bold;
				color: #1F1F1F;
				line-height: 32rpx;
			}

			.read-more {
				display: flex;
				align-items: center;
				color: #999999;

				.txt {
					font-size: 24rpx;
					font-weight: 400;
				}

				.iconfont {
					font-size: 20rpx;
					margin-left: 8rpx;
					transform: scale(0.8);
				}
			}
		}
	}

	.productSort .conter .list {
		flex-wrap: wrap;
	}

	.productSort .conter .list .item {
		width: 177rpx;
		margin-top: 26rpx;
	}

	.productSort .conter .list .item .picture {
		width: 160rpx;
		height: 160rpx;
		border-radius: 8rpx;
	}

	.productSort .conter .list .item .picture image {
		width: 100%;
		height: 100%;
		border-radius: 8rpx;
	}

	.productSort .conter .list .item .name {
		width: 100%;
		font-size: 24rpx;
		font-weight: 400;
		color: #1F1F1F;
		margin-top: 16rpx;
		text-align: center;
	}
</style>